<template>
  <div class="w-full h-32 pl-10 pr-10">
    <CollapseContainer class="mt-5" title="效果展示">
      <!-- 直接使用图标  -->
      <p>线条图标: <up-outlined />&nbsp;<down-outlined /></p>
      <p>实体图标: <up-circle-filled />&nbsp;<down-circle-filled /></p>
      <p>双色图标: <up-circle-two-tone />&nbsp;<down-circle-two-tone /></p>
      <p>自定义大小: <up-circle-filled class="text-lg" />&nbsp;<down-circle-filled class="text-2xl" /></p>
      <p>自定义颜色: <up-circle-filled class="color-green" /><down-circle-two-tone two-tone-color="#eb2f96" /></p>
      <p>旋转45°: <up-circle-filled :rotate="45" /></p>
      <p>动态旋转: <up-circle-filled :spin="true" /></p>
      <p>点击切换旋转: <up-circle-filled class="text-2xl" :spin="isSpin" @click="switchSpin" /></p>
    </CollapseContainer>

    <!-- 笔记 -->
    <CollapseContainer class="mt-5" title="使用说明">
      <markdown-viewer :value="getDoc()" />
    </CollapseContainer>

    <!-- 笔记 -->
    <CollapseContainer class="mt-5" title="源码">
      <markdown-viewer :value="getSource()" />
    </CollapseContainer>
  </div>
</template>
<script lang="ts" setup>
  import { CollapseContainer } from '@/components/Container';
  import { MarkdownViewer } from '@/components/Markdown';
  import { ref } from 'vue';

  // 引入 antd 相关图标
  import {
    UpOutlined,
    DownOutlined,
    UpCircleFilled,
    DownCircleFilled,
    UpCircleTwoTone,
    DownCircleTwoTone,
  } from '@ant-design/icons-vue';

  // 控制旋转变量
  const isSpin = ref(false);

  // 切换旋转
  function switchSpin() {
    isSpin.value = !isSpin.value;
  }
</script>

<script lang="ts">
  function getDoc() {
    return `

## antd Icon
* 官网: * <a href="https://www.antdv.com/components/icon-cn" target="_blank">antd Icon 官方文档</a>
* antd 提供了三种风格的图标，
    * 线框风格, 以 xxxOutlined 结尾, 如 UpOutlined, DownOutlined 等
    * 实体风格: 以 xxxFilled 结尾, 如 UpCircleFilled, DownCircleFilled 等
    * 双色风格: 以 xxxTwoTone 结尾，如 UpCircleTwoTone, DownCircleTwoTone 等
* 使用方式: antd 将每一个图标都封装成了组件，直接通过 import 引入即可使用。

## 常用属性

| 属性 | 类型 | 默认值 | 说明 | 示例 |
| :--- | :--- |  :--- |  :--- | :--- |
| spin | boolean | 是否旋转 | false | :spin="true" |
| rotate | number | 旋转固定角度(IE9无效) | 0 | :rotate="0 |
| twoToneColor | string | | 双色图标主颜色 | two-tone-color="#eb2f96" |

  `;
  }

  function getSource() {
    return `

\`\`\`html
\<template\>
  <p>线条图标: <up-outlined />&nbsp;<down-outlined /></p>
  <p>实体图标: <up-circle-filled />&nbsp;<down-circle-filled /></p>
  <p>双色图标: <up-circle-two-tone />&nbsp;<down-circle-two-tone /></p>
  <p>自定义大小: <up-circle-filled class="text-lg" />&nbsp;<down-circle-filled class="text-2xl" /></p>
  <p>自定义颜色: <up-circle-filled class="color-green" /><down-circle-two-tone two-tone-color="#eb2f96" /></p>
  <p>旋转45°: <up-circle-filled :rotate="45" /></p>
  <p>动态旋转: <up-circle-filled :spin="true" /></p>
  <p>点击切换旋转: <up-circle-filled class="text-2xl" :spin="isSpin" @click="switchSpin" /></p>
\</template\>

\<script lang="ts" setup\>
import { ref } from 'vue';

// 引入 antd 相关图标
  import {
    UpOutlined,
    DownOutlined,
    UpCircleFilled,
    DownCircleFilled,
    UpCircleTwoTone,
    DownCircleTwoTone,
  } from '@ant-design/icons-vue';

  // 控制旋转变量
  const isSpin = ref(false);

  // 切换旋转
  function switchSpin() {
    isSpin.value = !isSpin.value;
  }
\</script\>
\`\`\`
`;
  }
</script>
